<template>
	<view class="">
		<view >
			
			<view >
			
				<!-- banner -->
				<view class="swiper" style="height:650rpx;">
					<swiper  :autoplay="true" circular interval="3000"
						duration="500" indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff" style="height:650rpx;">
						<block v-for="(item, index) in list" :key="index">
							<swiper-item @tap="$Router.push({ path: '/pages/goods/detail', query: { id: item.id } })"> 
								<image class="image" :src="item.imgUrl"  mode="aspectFill" style="height:650rpx; width: 100%;margin:0;"></image>
								<!-- <image class="image" :src="https://yijiazuwu.oss-cn-hangzhou.aliyuncs.com/upload/20250516/69af89c4ee0e427ab8e6f633a1256947.png"  mode="aspectFill" style="height:650rpx; width: 100%;margin:0;"></image> -->
								
							</swiper-item>
						
						</block>
					</swiper>
				</view>
					<!-- #ifdef H5 -->
					<view class="header" :class="isFixed ? 'u-navbar-fixed' : 'u-navbar-fixed'" style="z-index:999;">
						<view class="serch-box" :class="isFixed ? 'u-height u-pt' : 'u-height u-padding-top'" :style="isFixed ? {backgroundColor:color} : ''">
							<text class=" name-text" >{{$APP_NAME}}</text>
						</view>
					</view>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<view class="mp-header" :class="isFixed ? 'u-navbar-fixed' : ''"  :style="{'padding-top':(isFixed ? statusBarHeight +'px' : '' )}">
						<view class="serch-box" :class="isFixed ? 'u-height u-pt' : ''" >
							<view class="serch-wrapper flex">
								<view class="logo">
									<!-- <image :src="logoUrl" mode=""></image> -->
									<text class="name-text" >{{$APP_NAME}}</text>
								</view>
							</view>
						</view>
					</view>
					<!-- #endif -->
			
			</view>
			
		
		  <!-- <view class="flex-row equal-division">
			<view class="flex-row justify-evenly items-center group equal-division-item">
			  <image
				class="image_2"
				src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/650813f45a7e3f03101b8cba/650bb0abec8866001128c01f/16952649577374777185.png"
			  />
			  <text class="font_1 text_2">芝麻免押</text>
			</view>
			<view class="flex-row justify-evenly items-center group equal-division-item">
			  <image
				class="image_2"
				src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/650813f45a7e3f03101b8cba/650bb0abec8866001128c01f/16952649577696901606.png"
			  />
			  <text class="font_1 text_2">零元租赁</text>
			</view>
			<view class="flex-row justify-evenly items-center group equal-division-item">
			  <image
				class="image_2"
				src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/650813f45a7e3f03101b8cba/650bb0abec8866001128c01f/16952649577158140839.png"
			  />
			  <text class="font_1 text_2">安全呵护</text>
			</view>
			<view class="flex-row justify-evenly items-center group equal-division-item">
			  <image
				class="image_2"
				src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/650813f45a7e3f03101b8cba/650bb0abec8866001128c01f/16952649576227089302.png"
			  />
			  <text class="font_1 text_2">国行可验</text>
			</view>
		  </view> -->
		</view>
	</view>
</template>

<script>
// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
let menuButtonInfo = {};
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
/**
 * home-head-轮播卡片,主要为了处理数据
 * @property {Array} list 轮播图数据，
 * @property {String} mode 指示器模式
 * @property {String} navTitle 项目名称
 */
export default {
	components: {},
	data() {
		return {
			navBgImage: '',
			changeNavBackground: false,
			swiperCur: 0,
			logoUrl:this.$APP_LOGO,
			statusBarHeight: systemInfo.statusBarHeight,
			color:this.$COLOR,
			navBg: { opacity: 0 },
			top_content_style: 'padding-top:'+(8)+'px;',
			isFixed:false,
			navTitleColor: {
				color: '#fff'
			}
		};
	},
	props: {
		scrollTop: {
			type: [String, Number],
			default: 0
		},
		// 轮播图的数据,格式如：[{image: 'xxxx', title: 'xxxx'}，{image: 'yyyy', title: 'yyyy'}]，其中title字段可选
		list: {
			// type: Array,
			default() {
				return [];
			}
		},
		
		navTitleStyle: {
			type: Object,
			default: () => {
				return {
					color: '#fff',
					fontSize: '38rpx'
				};
			}
		}
	},
	watch: {
		scrollTop(val) {
			this.isFixed = val > 20 ? true : false;
		}
	},
	computed: {
		// 导航栏内部盒子的样式
		navbarInnerStyle() {
			let style = {};
			style.height = this.navbarHeight + 'px';
			// #ifdef MP
			let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
			style.marginRight = rightButtonWidth + 'px';
			// #endif
			return style;
		},
		// 整个导航栏的样式
		navbarStyle() {
			let style = {};
			style.zIndex = this.$u.zIndex.navbar;
			style.background = 'none';
			Object.assign(style, this.background);
			return style;
		},
		navbarHeight() {
			// #ifdef APP-PLUS || H5
			return 44;
			// #endif
			// #ifdef MP
			return systemInfo.platform == 'ios' ? 44 : 48;
			// #endif
		},
	},
	beforeCreate() {
	},
	created() {
		console.log('gaodu',this.statusBarHeight)
		// this.navBgImage = this.list[0].imgUrl;
	},
	methods: {
		onSwiper(e) {
			console.log('跳转',e)
			// this.$tools.routerTo(this.list[e].router);
		},
		onChange(e) {
			this.swiperCur = e.detail.current;
		},
		setStatusStyle(status) {
			// #ifdef H5
			return false;
			// #endif
			if (status == 'light') {
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#000000',
					animation: {
						duration: 200,
						timingFunc: 'easeIn'
					}
				});
				// #ifdef APP-PLUS
				plus.navigator.setStatusBarStyle('light');
				// #endif
			} else {
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: '#ffffff',
					animation: {
						duration: 200,
						timingFunc: 'easeIn'
					}
				});

				// #ifdef APP-PLUS
				plus.navigator.setStatusBarStyle('dark');
				// #endif
			}
		}
	}
};
</script>


<style lang="scss">
.page {
  background-color: #f5f5f7;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.section {
  margin-top: -8rpx;
  padding: 116rpx 0 12rpx;
  background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/650813f45a7e3f03101b8cba/650bb0abec8866001128c01f/16952649574712864576.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.swiper {
	// position: relative;
	width: 100%;
	height: 370rpx;
	// margin: 0 auto;
	border-radius: 10rpx;
	// overflow: hidden;
	// margin-top: 20rpx;
	/* #ifdef MP */
	z-index: 10;
	// margin-top: 20rpx;
	/* #endif */
	swiper,
	.swiper-item {
		width: 100%;
		height: 350rpx;
		border-radius: 10rpx;
	}

}
.name-text{
	color:#ffffff;
	font-weight: bold;
	font-size: 34rpx;
	margin-left: 23rpx;
	z-index: 999;
}
.text {
  margin-left: 28rpx;
  color: #000000;
  font-size: 32rpx;
  font-family: PingFangSC;
  line-height: 30rpx;
}
.image {
	margin-top: 28rpx;
	margin:0 24rpx;
	width: 702rpx;
	height: 340rpx;
 
}
.equal-division {
  margin: 28rpx 0;
}
.group {
  flex: 1 1 188rpx;
}
.equal-division-item {
  padding-left: 24rpx;
  padding-right: 16rpx;
}
.image_2 {
  width: 29rpx;
  height: 29rpx;
}
.font_1 {
  font-size: 28rpx;
  font-family: PingFangSC;
  line-height: 24rpx;
  color: #999999;
}
.text_2 {
  line-height: 26rpx;
}
.group_2 {
  padding: 6rpx 24rpx 24rpx;
}
.space-y-30 > view:not(:first-child),
.space-y-30 > text:not(:first-child),
.space-y-30 > image:not(:first-child) {
  margin-top: 60rpx;
}
.space-y-12 > view:not(:first-child),
.space-y-12 > text:not(:first-child),
.space-y-12 > image:not(:first-child) {
  margin-top: 24rpx;
}
.image-wrapper {
  padding: 28rpx 0;
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0px 2rpx 4rpx #0000000f;
}
.image_3 {
  width: 642rpx;
  height: 134rpx;
}
.section_2 {
  padding: 0 24rpx 28rpx;
  overflow: hidden;
  border-radius: 8rpx;
  background-color: #35283c;
}
.group_3 {
  padding: 32rpx 0;
}
.space-x-6 > view:not(:first-child),
.space-x-6 > text:not(:first-child),
.space-x-6 > image:not(:first-child) {
  margin-left: 12rpx;
}
.font_2 {
  font-size: 40rpx;
  font-family: PingFangSC;
  line-height: 29rpx;
  font-weight: 600;
  color: #ff3b30;
}
.text_3 {
  color: transparent;
  line-height: 37rpx;
  background-image: linear-gradient(90deg, #ff9db4 0%, #ff93fe 100%);
  -webkit-background-clip: text;
}
.font_3 {
  font-size: 24rpx;
  font-family: PingFangSC;
  line-height: 24rpx;
  color: #ffffff;
}
.section_3 {
  padding: 8rpx 12rpx;
  background-image: linear-gradient(90deg, #d852f8 8.5%, #fa61a8 114.1%);
  border-radius: 4rpx;
  height: 36rpx;
}
.space-x-2 > view:not(:first-child),
.space-x-2 > text:not(:first-child),
.space-x-2 > image:not(:first-child) {
  margin-left: 4rpx;
}
.text_4 {
  color: #ffffff;
  font-size: 26rpx;
  font-family: AlibabaPuHuiTi;
  line-height: 19rpx;
}
.image_4 {
  width: 10rpx;
  height: 16rpx;
}
.equal-division_2 {
  position: relative;
}
.section_4 {
  padding: 8rpx 0 28rpx;
  overflow: hidden;
  border-radius: 8rpx;
  background-color: #ffffff;
}
.group_4 {
  margin-left: 12rpx;
}
.image_5 {
  width: 144rpx;
  height: 144rpx;
}
.font_4 {
  font-size: 20rpx;
  font-family: PingFangSC;
  line-height: 24rpx;
  color: #000000;
}
.text_5 {
  margin-top: -8rpx;
}
.font_5 {
  font-size: 20rpx;
  font-family: PingFangSC;
  line-height: 18rpx;
  color: #f60000;
}
.text_6 {
  margin-top: 12rpx;
  line-height: 17rpx;
}
.group_5 {
  position: absolute;
  left: 169rpx;
  top: 6rpx;
}
.group_6 {
  position: absolute;
  right: 171rpx;
  top: 6rpx;
}
.group_7 {
  position: absolute;
  right: 13rpx;
  top: 6rpx;
}
.equal-division-item_2 {
  padding: 8rpx 0;
  width: 158rpx;
}
.section_5 {
  padding-bottom: 308rpx;
  flex: 1 1 338rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  height: 376rpx;
}
.section_6 {
  background-image: linear-gradient(180deg, #b4d2ff 0%, #ffffff 100%);
  border-radius: 16rpx 16rpx 0px 0px;
  height: 68rpx;
}
.section_9 {
  padding: 0 28rpx 10rpx 34rpx;
  background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/650813f45a7e3f03101b8cba/650bb0abec8866001128c01f/16952649578158667253.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.space-y-96 > view:not(:first-child),
.space-y-96 > text:not(:first-child),
.space-y-96 > image:not(:first-child) {
  margin-top: 192rpx;
}
.pos_2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 30rpx;
}
.text-wrapper {
  padding: 4rpx 0 12rpx;
  background-color: #2e80fe;
  border-radius: 4rpx;
  width: 96rpx;
}
.font_6 {
  font-size: 20rpx;
  font-family: PingFangSC;
  line-height: 18rpx;
  font-weight: 600;
  color: #ffffff;
}
.text_7 {
  line-height: 15rpx;
}
.font_9 {
  font-size: 28rpx;
  font-family: PingFangSC;
  line-height: 24rpx;
  font-weight: 600;
  color: #ff3b30;
}
.text_9 {
  color: #000000;
  font-size: 30rpx;
  line-height: 28rpx;
}
.text-wrapper_3 {
  padding: 16rpx 0 12rpx;
  background-color: #2e80fe;
  border-radius: 27rpx;
}
.font_10 {
  font-size: 28rpx;
  font-family: PingFangSC;
  line-height: 24rpx;
  font-weight: 600;
  color: #ffffff;
}
.text_10 {
  line-height: 26rpx;
}
.group_8 {
  flex: 1 1 338rpx;
}
.section_7 {
  padding-bottom: 26rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
}
.section_8 {
  background-image: linear-gradient(180deg, #ffe8e1 0%, #ffffff 100%);
  border-radius: 16rpx 16rpx 0px 0px;
  height: 48rpx;
}
.font_8 {
  font-size: 20rpx;
  font-family: PingFangSC;
  line-height: 15rpx;
  color: #000000;
}
.text_8 {
  margin-left: 36rpx;
  margin-top: 28rpx;
}
.text-wrapper_2 {
  padding: 8rpx 0;
  background-color: #2e80fe;
  border-radius: 27rpx;
  width: 89rpx;
}
.view {
  margin-left: 36rpx;
  margin-top: 28rpx;
}
.image_6 {
  width: 166rpx;
  height: 166rpx;
}
.pos {
  position: absolute;
  right: 16rpx;
  top: 50%;
  transform: translateY(-50%);
}
.font_7 {
  font-size: 26rpx;
  font-family: PingFangSC;
  line-height: 24rpx;
  font-weight: 600;
  color: #000000;
}
.pos_3 {
  position: absolute;
  left: 37rpx;
  top: 38rpx;
}
.section_10 {
  padding-bottom: 12rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
}
.group_9 {
  padding-bottom: 120rpx;
}
.u-height{
	height: 60px;	
}
.u-background-color{
	background-color: #e2393c;
}
.u-padding-top {
	padding-top: 50rpx;
}
.u-navbar-fixed {
	margin-top: -8rpx;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	
	// background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/650813f45a7e3f03101b8cba/650bb0abec8866001128c01f/16952649574712864576.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.nav-bg {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 980;
	width: 100%;
	height: 100%;
	background-color: #fff;
}
.header {
	width: 100%;
	// background-color: $theme-color;

}
.section_11 {
  background-image: linear-gradient(180deg, #fffbec 0%, #ffffff 100%);
  border-radius: 16rpx 16rpx 0px 0px;
  height: 48rpx;
}
.pos_5 {
  position: absolute;
  left: 38rpx;
  top: 38rpx;
}
.image_7 {
  width: 154rpx;
  height: 154rpx;
}
.pos_4 {
  position: absolute;
  right: 16rpx;
  bottom: 0;
}
.pos_6 {
  position: absolute;
  left: 37rpx;
  top: 76rpx;
}
.pos_7 {
  position: absolute;
  left: 36rpx;
  top: 120rpx;
}
.text-wrapper_4 {
  padding: 12rpx 0 200rpx;
  background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/650813f45a7e3f03101b8cba/650bb0abec8866001128c01f/16952649582688656839.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.text_11 {
  margin-left: 32rpx;
  line-height: 26rpx;
}
.section_12 {
  background-color: #ffffff;
  border-radius: 16rpx;
}
.text-wrapper_5 {
  padding: 12rpx 0 200rpx;
  background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/650813f45a7e3f03101b8cba/650bb0abec8866001128c01f/16952649579731117837.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 198rpx;
  height: 240rpx;
}
.text_12 {
  line-height: 26rpx;
}
.group_10 {
  margin: 0 32rpx;
}
.space-y-6 > view:not(:first-child),
.space-y-6 > text:not(:first-child),
.space-y-6 > image:not(:first-child) {
  margin-top: 12rpx;
}
.space-x-14 > view:not(:first-child),
.space-x-14 > text:not(:first-child),
.space-x-14 > image:not(:first-child) {
  margin-left: 28rpx;
}
.image_8 {
  width: 128rpx;
  height: 128rpx;
}
.image_9 {
  flex: 1 1 128rpx;
}
.image_10 {
  flex: 1 1 128rpx;
}
.image_11 {
  flex: 1 1 128rpx;
}
.group_11 {
  padding: 0 16rpx;
}
.u-pt {
	padding-top: 25rpx;
}
.font_11 {
  font-size: 16rpx;
  font-family: PingFangSC;
  line-height: 18rpx;
  color: #333333;
}
.group_12 {
  padding-left: 36rpx;
  padding-right: 28rpx;
}
.font_12 {
  font-size: 16rpx;
  font-family: PingFangSC;
  line-height: 13rpx;
  font-weight: 600;
  color: #ff3b30;
}
.space-x-12 > view:not(:first-child),
.space-x-12 > text:not(:first-child),
.space-x-12 > image:not(:first-child) {
  margin-left: 24rpx;
}
.text-wrapper_6 {
  padding: 12rpx 0 200rpx;
  background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/650813f45a7e3f03101b8cba/650bb0abec8866001128c01f/16952649584710177283.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 198rpx;
  height: 240rpx;
}
.logo {
	width: 500rpx;
	height: 42rpx;
	margin-right: 24rpx;
}
.group_13 {
  padding: 0 12rpx;
}
.image_12 {
  margin: 8rpx 0 8rpx 8rpx;
}
.group_14 {
  padding: 0 24rpx;
}
.space-x-32 > view:not(:first-child),
.space-x-32 > text:not(:first-child),
.space-x-32 > image:not(:first-child) {
  margin-left: 64rpx;
}
.group_15 {
  margin-top: 12rpx;
  padding: 0 40rpx;
}
.space-x-44 > view:not(:first-child),
.space-x-44 > text:not(:first-child),
.space-x-44 > image:not(:first-child) {
  margin-left: 88rpx;
}
.space-y-14 > view:not(:first-child),
.space-y-14 > text:not(:first-child),
.space-y-14 > image:not(:first-child) {
  margin-top: 28rpx;
}
.space-x-8 > view:not(:first-child),
.space-x-8 > text:not(:first-child),
.space-x-8 > image:not(:first-child) {
  margin-left: 16rpx;
}
.text_13 {
  margin-left: 20rpx;
  color: #000000;
  font-size: 36rpx;
  font-family: PingFangSC;
  line-height: 33rpx;
}
.image_13 {
  opacity: 0.83;
  width: 52rpx;
  height: 16rpx;
}
.pos_8 {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.space-y-10 > view:not(:first-child),
.space-y-10 > text:not(:first-child),
.space-y-10 > image:not(:first-child) {
  margin-top: 20rpx;
}
.list-item {
  padding: 24rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
}
.space-x-13 > view:not(:first-child),
.space-x-13 > text:not(:first-child),
.space-x-13 > image:not(:first-child) {
  margin-left: 26rpx;
}
.image_14 {
  width: 226rpx;
  height: 226rpx;
}
.group_16 {
  margin-right: 4rpx;
}
.space-y-46 > view:not(:first-child),
.space-y-46 > text:not(:first-child),
.space-y-46 > image:not(:first-child) {
  margin-top: 92rpx;
}
.text-wrapper_7 {
  padding: 8rpx 0 4rpx;
  background-color: #1677ff;
  border-radius: 4rpx;
  height: 32rpx;
}
.font_14 {
  font-size: 20rpx;
  font-family: PingFangSC;
  line-height: 18rpx;
  color: #ffffff;
}
.text_15 {
  margin: 0 4rpx;
  line-height: 19rpx;
}
.font_13 {
  font-size: 28rpx;
  font-family: AlibabaPuHuiTi;
  line-height: 29rpx;
  color: #333333;
}
.text_14 {
  font-size: 30rpx;
  line-height: 28rpx;
}
.group_17 {
  line-height: 29rpx;
  height: 31rpx;
}
.font_15 {
  font-size: 24rpx;
  font-family: PingFangSC;
  line-height: 18rpx;
  font-weight: 600;
  color: #ff3b30;
}
.text_16 {
  line-height: 17rpx;
}
.text-wrapper_8 {
  margin-right: 16rpx;
  padding: 12rpx 0;
  background-color: #1677ff;
  border-radius: 23rpx;
  width: 112rpx;
  height: 46rpx;
}
.text_17 {
  line-height: 22rpx;
}
.section_13 {
  padding: 8rpx 0;
  background-color: #ffffff;
}
.image_15 {
  width: 48rpx;
  height: 48rpx;
}
.text_18 {
  line-height: 19rpx;
}
.group_18 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.font_16 {
  font-size: 20rpx;
  font-family: PingFangSC;
  line-height: 18rpx;
  color: #999999;
}
.group_19 {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.equal-division-item_3 {
  padding: 8rpx 0;
  width: 250rpx;
}
.space-y-8 > view:not(:first-child),
.space-y-8 > text:not(:first-child),
.space-y-8 > image:not(:first-child) {
  margin-top: 16rpx;
}
.text_19 {
  line-height: 19rpx;
}
/************************************************************
** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
** 否则页面将无法正常显示                                  **
************************************************************/

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
    'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

view,
image,
text {
  box-sizing: border-box;
  flex-shrink: 0;
}

#app {
  width: 100vw;
  height: 100vh;
}
.serch-wrapper {
	align-items: center;
}
.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-baseline {
  align-self: baseline;
}

.self-stretch {
  align-self: stretch;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.grow {
  flex-grow: 1;
}

.grow-0 {
  flex-grow: 0;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.relative {
  position: relative;
}

</style>
